<template>
	<view class="container">
		<view class="content">
			<!-- 头部 -->
			<up-status-bar></up-status-bar>
			<view class="header">
				<view class="l_f_r_sb_c">
					<view class="l_f_r" @click="$goURl('/pages/personal/set/userinfo')">
						<image class="avatar" :src="userInfo.head?userInfo.head:$defaultAvatar" mode="aspectFill">
						</image>
						<view class="right l_f_c ">
							<view class="l_f_r_c_c">
								<text class="text_b_36">{{ userInfo.nickname }}</text>
								<!--     #ifdef MP-WEIXIN -->
								<view class="level l_f_r_c_c text_5_24">{{ level[userInfo.level] }}</view>
								<!-- #endif-->

							</view>
							<view class="text_5_26 text_c_5">邀请码：{{ (userInfo.user_id) }}</view>

						</view>
					</view>
					<!--          <view class="l_f_r_c_c qiehuan text_5_24" @click="$goURl('/pages/personal/set/accountManagement')">-->
					<!--            <image class="qiehuan_icon" src="https://img.fubaozx.cn/static/newImg/qiehuan.png" mode="aspectFill"></image>-->
					<!--            切换账号-->
					<!--          </view>-->
					<view class="l_f_r_c_c qiehuan text_5_24" @click="$goURl('/pages/personal/set/index')">
						<uni-icons type="gear" size="20"></uni-icons>设置
					</view>

				</view>
				<!--     #ifdef MP-WEIXIN -->
				<up-rate class="rate" :gutter="2" :count="5" inactiveColor="transparent" activeColor="#FF2C19" readonly
					v-model="userInfo.new_level"></up-rate>
				<!-- #endif-->

			</view>
			<!--     #ifdef MP-WEIXIN -->
			<view class="jifen bg_set">
				<view class="title l_f_r l_al_c text_b_32">
					<image class="jficon" src="https://img.fubaozx.cn/static/newImg/jficon.png" mode="aspectFill">
					</image>
					积分专区
				</view>
				<view class="l_f_r_sa_c">
					<view class="item" v-for="(item,index) in integrationList" :key="index" @click="$goURl(item.url)">
						<view class="left l_f_c_c_c">
							<text class="text_c_5 text_5_24">{{ item.name }}</text>

							<view class="text_6_36 text_c_2d" style="font-size: 36rpx;margin-bottom: 20rpx;">
								{{ (userInfo[item.value]).toFixed(2) }}
							</view>
						</view>
						<!-- <uni-icons type="forward" size="22"></uni-icons> -->
					</view>
				</view>
			</view>

      <!-- #endif-->

      <view class="order " style="margin-top: 0;">
        <view class="text_b_32 title">
          我的订单
        </view>
        <view class="l_f_r_sb_c">
          <view class="item " v-for="(item,index) in orderList" :key="index"
                @click="$goURl(item.url)">

            <view class="left l_f_c_c_c text_b_24" style="position: relative;">
              <u-badge style="position: absolute;right: 5rpx;top: -10rpx; z-index: 9" :type="type"
                       max="99" :value="subscriptOrder[item.subscript]"></u-badge>
              <image :src="item.img" mode=""
                     style="width: 60upx;height: 60upx;margin-bottom: 6px;">
              </image>
              {{ item.name }}
            </view>
            <!-- <uni-icons type="forward" size="22"></uni-icons> -->
          </view>
        </view>
      </view>

			<!-- 常用工具 -->
			<view class="fff_cnt">

				<view class="" >

					<view class="l_f_r_sb_c juan">
            <view class="it bg_set" @click="$goURl('/pages/personal/wallet/balance?wallet_type=0')">
              <view class="l_f_r_c_c l_j_s">
                <view class="text_5_26">消费券：</view>
                <view class="text_6_36"> {{ (userInfo.money).toFixed(2) }}</view>
              </view>
              <view class="l_f_r_c_c l_j_s">
                <view class="text_5_26">累计：</view>
                <view class="text_4_28"> {{ (userInfo.total_money).toFixed(2) }}</view>
              </view>

            </view>
            <view class="it2 it bg_set" @click="$goURl('/pages/personal/wallet/balance?wallet_type=1')">
              <view class="l_f_r_c_c l_j_s">
                <view class="text_5_26">补贴券：</view>
                <view class="text_6_36"> {{ (userInfo.coupon).toFixed(2) }}</view>
              </view>
              <view class="l_f_r_c_c l_j_s">
                <view class="text_5_26">累计：</view>
                <view class="text_4_28"> {{ (userInfo.total_coupon).toFixed(2) }}</view>
              </view>

            </view>
					</view>
					<view class="jingci bg_set" @click="$goURl('/pages/personal/share')">

					</view>
					<!-- 常用工具 -->

					<view class="Tools ">
						<view class="items " v-for="(item,index) in orderlistsss" :key="index" @click="toUrl(item)">
							<view class="left l_f_c_c_c">
								<image :src="item.img" mode="widthFix" style="width: 60rpx"></image>
								<view class="name" style="font-size: 24rpx;color: #2D2D2D;">{{ item.name }}</view>
							</view>

						</view>

						<view v-if="!userInfo.parentMobile" class="items" @click="confirmPopupRef.open()">
							<view class="left l_f_c_c_c">
								<image src="https://img.fubaozx.cn/static/newImg/icon8.png" mode="widthFix"
									style="width: 60rpx"></image>
								<view class="name" style="font-size: 24rpx;color: #2D2D2D;">绑定邀请人</view>
							</view>

						</view>

					</view>

					<view class="shop">
						<view class="text_b_32 title">
							商家服务
						</view>
						<view class="Tools ">
							<view class="items " v-for="(item,index) in shopList" :key="index" @click="toUrl(item)">
								<view class="left l_f_c_c_c">
									<image :src="item.img" mode="widthFix" style="width: 64rpx"></image>
									<view class="name" style="font-size: 24rpx;color: #2D2D2D;">{{ item.name }}</view>
								</view>

							</view>
						</view>
					</view>

					<view class="" style="height: 100rpx;">

					</view>

				</view>

			</view>


			<view class="page-total" v-if="isBox">
				<view class="box">
					<view class="dialog-box">
						<view class="title">景瓷商链绑定</view>

						<input type="text" style="margin-left: 30px;" v-model="account" placeholder="请输入景瓷商链账号">

						<view class="operation-btn">
							<view class="btn" @click="onCancel">
								<text>取消</text>
								<text class="tag"></text>
							</view>
							<view class="btn" @click="onConfirm">
								<text class="activity">确定</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<ConfirmPopup ref="confirmPopupRef" confirmText="关联推荐人" title="关联推荐人" @confirm="bindingFn">
			<template #content>
				<view class="">
					<up-input class="binding_input" v-model="bindingValue" placeholder="请输入关联推荐人"></up-input>
					<view class="text_c_r text_5_24">
						请输入推荐人手机号或uid
					</view>
				</view>
			</template>
		</ConfirmPopup>
	</view>
</template>

<script setup>
	//商品列表
	import * as qrcode from "../../static/js/reqrcode.js"
	import {
		getCurrentInstance,
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from 'vuex';
	import ConfirmPopup from "@/components/ConfirmPopup.vue";

	const confirmPopupRef = ref(null);
	const {
		proxy
	} = getCurrentInstance();

	const bindingValue = ref('')
	const bindingFn = () => {
		// if (!(/^1[3456789]\d{9}$/).test(bindingValue.value)) {
		//   uni.showToast({
		//     icon: "none",
		//     position: "bottom",
		//     title: "手机号不正确"
		//   });
		//   return false;
		// }
		proxy.$request({
			url: `api/binding/`,
			method: "post",
			data: {
				mobile: bindingValue.value
			},
			success(res) {
				console.log("handleConfirm", res);
				if (res.errno == 0) {
					inits()
				}
				uni.showToast({
					icon: "none",
					title: res.errmsg
				});

				// data.userInfo=res.data
				// uni.setStorageSync('userInfo',res.data)
			}
		});
	}


	const store = useStore();
	const level = uni.getStorageSync('level')
	const decorationData = store.state.decorationData
	const {
		appContext
	} = getCurrentInstance();
	let data = reactive({
		subscript: {},
		subscriptShow: false,
		current: 0,
		page: 0,
		size: 20,
		pages: 1,
		goodlistData: [],
		signAll: 0,
	})
	let userInfo = ref({})
	let userLevel = ref([])
	let isShow = ref(false)
	let isBox = ref(false)
	const subscriptOrder = ref('')
	let account = ref("")

	let orderlistsss = reactive([])
	let orderId = ref(1)
	let activeIndex = ref(0)
	const newLive = [{
			name: '普通',
			value: 0,
		},
		{
			name: '1星',
			value: 1,
		},
		{
			name: '2星',
			value: 2,
		},
		{
			name: '3星',
			value: 3,
		},
		{
			name: '4星',
			value: 4,
		},
		{
			name: '5星',
			value: 5,
		},
		{
			name: '6星',
			value: 6,
		},
		{
			name: '7星',
			value: 7,
		},
	]

	function getLevelName(value) {
		return newLive.find(item => item.value == value).name
	}
	let orderList = reactive([{
		name: '待付款',
		state: 1,
		img: '/static/img_/order1.png',
		url: '/pages/order/order?state=1',
		subscript: 0
	}, {
		name: '待发货',
		state: 2,
		img: '/static/img_/order2.png',
		url: '/pages/order/order?state=2',
		subscript: 1
	}, {
		name: '待收货',
		state: 3,
		img: '/static/img_/order3.png',
		url: '/pages/order/order?state=3',
		subscript: 2
	}, {
		name: '已完成',
		state: 4,
		img: '/static/img_/order4.png',
		url: '/pages/order/order?state=4',
		subscript: 4
	}, ])

	let integrationList = reactive([
		// {
		//   name: '消费券',
		//   state: 4,
		//   img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335081992.png',
		//   url: '/pages/personal/wallet/balance?wallet_type=0',
		//   value: 'money'
		// },
		// {
		//   name: '补贴券',
		//   state: 3,
		//   img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335087359.png',
		//   url: '/pages/personal/wallet/balance?wallet_type=1',
		//   value: 'coupon'
		// },

		{
			name: '绿色积分',
			state: 1,
			img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335098384.png',
			url: '/pages/personal/wallet/balance?wallet_type=3',
			value: 'green'
		},
		{
			name: '资产积分',
			state: 2,
			img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335092376.png',
			url: '/pages/personal/wallet/balance?wallet_type=2',
			value: 'asset'
		},
		{
			name: '权益值',
			state: 4,
			img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335092376.png',
			url: '/pages/personal/wallet/balance?wallet_type=4',
			value: 'rights'
		},
		{
			name: '贡献值',
			state: 5,
			img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335092376.png',
			url: '/pages/personal/wallet/balance?wallet_type=5',
			value: 'contribution'
		},
	])
	const shopList = computed(() => {
		const list = [{
				img: 'https://img.fubaozx.cn/static/newImg/icon9.png',
				name: '商家入驻',
				url: '/pages/business/MerchantManagement'
			}, {
				img: 'https://img.fubaozx.cn/static/newImg/icon10.png',
				name: '添加商品',
				url: '/pages/business/addGoods'
			},

			{
				img: 'https://img.fubaozx.cn/static/newImg/icon11.png',
				name: '商品管理',
				url: '/pages/business/goodsList'
			},
			{
				img: 'https://img.fubaozx.cn/static/newImg/icon12.png',
				name: '订单管理',
				url: '/pages/business/order'
			},
		]
		if (userInfo.value.shop_state == 1) {
			list[0].name = '商家管理'
			return list
		} else {
			return list.filter(item => item.name == '商家入驻')
		}
	})
	onLoad((option) => {
		// pages/personal/index?token=3e6007c3ebf6484fb970840cd9480a53
		// const token = 'e3a15cb29af9926a0381e212277d7a80'
		// if(option.token||token){
		//   const userInfo = uni.getStorageSync('userInfo')
		//   userInfo.token = option.token||token
		//   uni.setStorageSync('userInfo', userInfo)
		//   inits()
		//
		// }
    getBusinessToken()
	})

	let moneyName = ref(null)
	onShow(() => {

		data.page = 0
		data.pages = 1
		data.goodlistData = []
		inits()
		userInfo.value = uni.getStorageSync('userInfo')
		// #ifdef MP-WEIXIN
		if (!userInfo.value.token) {
			// wxlogin()
		}
		// #endif
		setOder() //设置需要显示哪些订单
		userLevel.value = uni.getStorageSync('level')
		moneyName.value = uni.getStorageSync('money')
		account.value = userInfo.value.account

	})

	function onCancel() {

		isBox.value = false
	}

	function onConfirm() {

		let obj = {
			account: account.value
		}
		proxy.$request({
			url: `api/user_info/`,
			method: 'post',
			data: obj,
			success(res) {
				uni.showToast({
					icon: 'none',
					title: res.errmsg
				})
				isBox.value = false
				data.userInfo = res.data
				userInfo = res.data
				uni.setStorageSync('userInfo', res.data)
			}
		})


	}

	onPullDownRefresh(() => {
		inits()
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	})
	onReachBottom(() => {
		init()
	})

	// 显示输入弹框
	function showDialogBoxInput() {
		console.log(DialogBox);
		DialogBox.confirm({
			title: '更改昵称',
			placeholder: '请输入修改的昵称',
			value: "",
			DialogType: 'input',
			animation: 0
		}).then((res) => {
			// 输入框返回值res

			console.log(res.value)
		})
	}

	const shopBtnList = computed(() => {
		const list = [{
			img: 'https://pili-vod.guanxikeji.com/fubao/img/1755657890839.png',
			name: '商家入驻',
			url: '/pages/business/MerchantManagement'
		}, ]
	})

	function setOder() {
		const list = [{
				img: 'https://img.fubaozx.cn/static/newImg/icon1.png',
				name: '地址管理',
				url: '/pages/personal/address/list'
			},
			//#ifdef MP-WEIXIN
			{
				img: 'https://img.fubaozx.cn/static/newImg/icon2.png',
				name: '粉丝管理',
				url: '/pages/personal/teams/team'
			},
			//#endif

			{
				img: 'https://img.fubaozx.cn/static/newImg/icon3.png',
				name: '我的收藏',
				url: '/pages/personal/footprint/index'
			},
			{
				img: 'https://img.fubaozx.cn/static/newImg/icon4.png',
				name: '客服中心',
				url: '/pages/customerService/customerService'
			},
			{
				img: 'https://img.fubaozx.cn/static/newImg/icon5.png',
				name: '实名认证',
				url: '/pages/personal/realName/realName'
			}, {
				img: 'https://img.fubaozx.cn/static/newImg/icon6.png',
				name: '支付密码',
				url: '/pages/personal/password/password?code=1'
			},
			{
				img: 'https://img.fubaozx.cn/static/newImg/icon7.png',
				name: '登录密码',
				url: '/pages/personal/password/password?code=0'
			},
			// {
			//   img: 'https://img.fubaozx.cn/static/newImg/icon6.png',
			//   name: '账号管理',
			//   url: '/pages/personal/set/accountManagement'
			// },


		]


		orderlistsss = list
	}

	function getSign() {
		data.signAll = 0
		appContext.config.globalProperties.$request({
			url: `api/record/?page=${1}&size=${10000}&wallet_type=${1}&detailed=20`,
			method: 'GET',
			success(res) {
				if (res.data.data.length > 0) {
					res.data.data.forEach((it) => {
						data.signAll += it.money
					})
				}

			}
		})
	}

	function wxlogin() {
		uni.login({
			provider: 'weixin', //使用微信登录
			success: function(loginRes) {
				uni.showLoading({
					title: '登录中'
				});
				var config = {
					code: loginRes.code,
				}
				proxy.$request({
					url: 'api/wxLogin/',
					method: 'post',
					data: config,
					success: res => {
						uni.hideLoading()
						if (res.errno == 0) {
							userInfo.value = res.data
							uni.setStorageSync('userInfo', res.data)
						} else if (res.errno == 3) {
							data.open_id = res.data
						} else {
							uni.showToast({
								icon: 'none',
								title: res.errmsg
							})
						}
					}
				})
			},
		});
	}

	//tabs通知swiper切换
	function tabsChange(index) {
		data.current = index;
	}

	//切换订单
	function clickOrder(id) {
		orderId.value = id
	}

	// 扫码
	function scan() {
		// #ifdef APP-PLUS
		uni.scanCode({
			success: function(res) {
				let dats = ''
				dats = res.result.split('=')
				appContext.config.globalProperties.$goURl('/pages/business/pay?id=' + dats[0] + '&discount=' +
					dats[1] +
					'&notes=' + dats[2] + '&money=' + dats[3])
			},
			fail(err) {
				uni.showToast({
					icon: 'none',
					title: '扫码失败'
				})
			}
		});
		// #endif

		// #ifdef MP-WEIXIN
		imgUp()
		// #endif

	}

	function getBusinessToken() { //获取商家token
		appContext.config.globalProperties.$request({
			url: `api/getBusinessToken/`,
			method: 'get',
			success(res) {
				if (res.errno == 0) {
					uni.setStorageSync('businessToken', res.data.businessToken)
				}
			}
		})
	}

	function logout() {
		uni.showModal({
			title: '提示',
			content: '是否确认退出?',
			success: function(res) {
				if (res.confirm) {
					proxy.$request({
						url: `api/logout/`,
						method: 'POST',
						success(res) {
							if (res.errno == 0) {
								uni.setStorageSync('userInfo', {})
								uni.redirectTo({
									url: '/pages/login/login'
								})
							}
						}
					})
				} else {
					console.log('用户点击确定');
				}
			}
		})

	}

	function imgUp() {
		uni.chooseImage({
			sizeType: ['original'],
			count: 1,
			success: function(res) {
				const tempFilePaths = res.tempFilePaths
				qrcode.qrcode.decode(tempFilePaths[0]);
				qrcode.qrcode.callback = function(img) {
					if (img == "error decoding QR Code") {
						uni.showToast({
							title: "识别二维码失败，请重新上传！",
							duration: 2000,
							icon: 'none'
						})
					} else {
						let dats = img.split('=')
						appContext.config.globalProperties.$goURl('/pages/business/pay?id=' + dats[0] +
							'&discount=' + dats[
								1] + '&notes=' + dats[2] + '&money=' + dats[3])
					}
				}
			}
		});
	}

	function q() {
		proxy.$request({
			url: `api/subscript/`,
			method: 'get',
			success(res) {
				subscriptOrder.value = res.data.order
			}
		})

	}

	function init() {
		q()
		if (data.page < data.pages) {
			data.page++
			appContext.config.globalProperties.$request({
				url: `api/goods_list_all/0/?page=${data.page}&size=${data.size}&is_index=1`,
				method: 'get',
				success(resd) {
					if (resd.errno == 0) {
						data.pages = Math.ceil(resd.data.total / data.size)
						data.goodlistData = resd.data.data
						// isShow.value = true
					}
				}
			})
		}
	}

	function inits() {
		appContext.config.globalProperties.$request({
			url: `api/user_info/`,
			method: 'get',
			success(resd) {
				if (resd.errno == 0) {
					userInfo.value = resd.data
					uni.setStorageSync('userInfo', resd.data)
          const {total_money,total_coupon,green}=resd.data
          if( (total_money+total_coupon)>=green*4){
            uni.showToast({
              title: '您的补贴即将达到上限',
              icon: 'none',
              duration: 2000,
            })
          }
					init()
					// getSign() //获取签到积分
				}
			}

		})

	}

	function scrollEvent(e) {
		console.log('scrollEvent', e)

	}

	function copy(data) {
		uni.setClipboardData({
			data: data,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'none',
				})
			}
		});
	}

	function applyBusinesss() { //获取审核结果
		appContext.config.globalProperties.$request({
			url: `api/applyBusiness/`,
			method: 'put',
			success(res) {
				if (res.errno == 0) {
					if (res.data.state == 1 || res.data.state == 3) {
						orderlists.value = [{
							img: 'https://pili-vod.guanxikeji.com/houdejia/img/1710465287107.png',
							name: '商家管理',
							url: '/pages/business/MerchantManagement'
						}]
					} else {
						orderlists.value = [{
							img: 'https://pili-vod.guanxikeji.com/houdejia/img/1710465287107.png',
							name: '商家申请',
							url: '/pages/business/applyfor'
						}]

					}
				} else {
					orderlists.value = [{
						img: 'https://pili-vod.guanxikeji.com/houdejia/img/1710465287107.png',
						name: '商家申请',
						url: '/pages/business/applyfor'
					}, ]
				}

			}
		})
	}

	//选择哪种订单
	function handClicktab(obj, e) {
		activeIndex.value = e
		orderList.forEach((it, i) => {
			if (e !== 0 && i !== 3) {
				it.url = obj.url.slice(0, -1) + it.state;
			} else {
				it.url = obj.url.slice(0, -1) + it.state;
			}
		})
	}

	function toUrl(item) {
		proxy.$goURl(item.url)

	}
</script>
<style lang="scss" scoped>
	.content {
		height: 100vh;
		width: 100vw;
		overflow: auto;
		background-image: url("https://img.fubaozx.cn/static/newImg/bg1.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;

		.header {
			margin-bottom: 28rpx;
			margin-top: 72rpx;
			width: 100%;
			padding: 0 0 0 30rpx;
			box-sizing: border-box;

			.avatar {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.right {
				height: 108rpx;

				justify-content: space-around;
				padding-bottom: 10rpx;
			}

			.level {
				min-width: 124rpx;
				height: 40rpx;
				padding: 0 10rpx;
				margin-left: 10rpx;
				background: linear-gradient(90deg, #EFEFEF 0%, #D4D4D4 100%);
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				border: 2rpx solid #F7F8F9;
				//border-image: linear-gradient(116deg, rgba(255, 255, 255, 1), rgba(230, 230, 230, 1)) 2 2;
				color: #434343;
			}

			.rate {
				margin-left: 128rpx !important;
			}

			.qiehuan {
				//width: 170rpx;
				height: 52rpx;
				padding: 0 20rpx;
				background: #FFFFFF;
				border-radius: 27rpx 0rpx 0rpx 27rpx;
				opacity: 0.8;
				gap: 5rpx;

				.qiehuan_icon {
					width: 38rpx;
					height: 38rpx;

				}
			}
		}

		.jifen {
			width: 690rpx;
			height: 204rpx;
			background-image: url("https://img.fubaozx.cn/static/newImg/bg5.png");
			margin: 0 auto;
			box-sizing: border-box;

			.jficon {
				padding: 24rpx 22rpx;
				width: 40rpx;
				height: 40rpx;

			}

			.text_6_36 {
				margin-top: 5rpx;
			}
		}

    .order {
      box-sizing: border-box;
      width: 690rpx;
      //height: 216rpx;
      background: #FFFFFF;
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      padding: 24rpx 28rpx;
      margin: 0 auto;
      margin-bottom: 32rpx;

      .title {
        margin-bottom: 32rpx;
      }
    }
		.fff_cnt {
			box-sizing: border-box;
			border-radius: 32rpx 32rpx 0 0;
			background: linear-gradient(180deg, #fff 0%, #F7F7F7 10%);
			//margin-top: 28rpx;
			padding: 28rpx 30rpx 0;

			.order {
				box-sizing: border-box;
				width: 690rpx;
				//height: 216rpx;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				margin-bottom: 32rpx;
				padding: 24rpx 28rpx;

				.title {
					margin-bottom: 32rpx;
				}
			}

			.jingci {
				width: 688rpx;
				height: 126rpx;
				margin: 30rpx auto;
				background-image: url("https://img.fubaozx.cn/static/newImg/bg2.png");
			}

			.juan {
				.it {
					width: 336rpx;
					height: 145rpx;
					background-image: url("https://img.fubaozx.cn/static/newImg/bg3.png");
					padding: 20rpx;
					box-sizing: border-box;
          white-space: nowrap;
				}

				.it2 {
					background-image: url("https://img.fubaozx.cn/static/newImg/bg4.png");
				}
			}

			.Tools {
				width: 690rpx;
				//height: 292rpx;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				margin: 30rpx auto 0;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-gap: 20rpx;
				box-sizing: border-box;
				padding: 28rpx 0rpx;

				.name {
					margin-top: 16rpx;
				}
			}

			.shop {
				margin: 30rpx auto;
				box-sizing: border-box;
				padding: 26rpx 0;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;

				.title {
					margin-left: 28rpx;
				}

				.Tools {
					height: auto;
					padding: 0;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
				}
			}
		}

	}
</style>
